/**
 *  当页面滚动的时候，提供一个透明度的值，作为navbar的背景色的透明度
 *
 * 调用：
 * ```js
 * import { useGetNavbarOpacity } from "@/hooks/useGetNavbarOpacity";
 * import { onPageScroll } from "@dcloudio/uni-app";
 * const { scrollFn, opacity } = useGetNavbarOpacity();  //opacity为透明度的值, scrollFn为滚动事件的回调函数,如果是scroll-view，则将scrollFn传入scroll-view的scroll事件中
 * onPageScroll(scrollFn);
 * ```
 */

import { ref } from "vue";
import useGetNavInfo from "./useGetNavInfo";

export function useGetNavbarOpacity(navBarHeight, ratio = 3) {
  const { height } = useGetNavInfo();
  const opacity = ref(0);
  let scrollFn = (e) => {
    let scrollTop = 0;
    let navHeight = navBarHeight || height.value;
    if (e.detail) {
      scrollTop = e.detail.scrollTop;
    } else {
      scrollTop = e.scrollTop;
    }
    let o = scrollTop / (navHeight * ratio);
    if (o < 0.1) {
      o = 0;
    } else if (o > 1) {
      o = 1;
    }
    opacity.value = o;
  };

  return {
    scrollFn,
    opacity,
  };
}
